<template>
  <div class="container" ref="container">
    <img class="logo" src='../../asset/images/menhu/logo.png'></img>
    <div class="menhu-content">
      <div class="title">华润集团国资监管创新应用平台</div>
      <div
        style="display: flex;flex-direction: row;justify-content: space-between;flex-wrap:wrap;padding:60px;gap: 50px;"
      >
      <div class="item" :style="{ height: itemHeight, width: itemWidth }" @click="goUrl('oeos-home')">
          <div class="bg6"></div>
          <div class="subTitle">
            <span :class="{ 'no-permission': !hasPermission('oeos-home'.toUpperCase()) }">一企一屏试点建设</span>
          </div>
          <div class="subDes">
            <span :class="{ 'no-permission': !hasPermission('oeos-home'.toUpperCase()) }">
              根据国资委“十二可”智能监管升级要求及“一企一屏”对科技创新、产业控制、安全支撑、重要生产经营管理活动全过程、本企业特色内容等方面的检测展示内容要求，本期聚焦公司治理可评、社会责任可衡、资本布局可控、合规风险可辨进行试点建设。
            </span>
          </div>
        </div>
        <div
          class="item"
          :style="{ height: itemHeight, width: itemWidth }"
          @click="goUrl('guozi-supervise-overview-home')"
        >
          <div class="bg1"></div>
          <div class="subTitle">
            <span :class="{ 'no-permission': !hasPermission('guozi-supervise-overview-home'.toUpperCase()) }"
              >监管画像</span
            >
          </div>
          <div class="subDes">
            <span :class="{ 'no-permission': !hasPermission('guozi-supervise-overview-home'.toUpperCase()) }"
              >基于国资监管数字化能力建设成果，汇聚整合国资监管数据，挖掘国资监管数据价值，构建华润集团及各业务单元的监管画像，分析各单位的国资监管现状并提示业务风险。</span
            >
          </div>
        </div>
        <div class="item" :style="{ height: itemHeight, width: itemWidth }" @click="goUrl('procure-supervise-home')">
          <div class="bg3"></div>
          <div class="subTitle">
            <span :class="{ 'no-permission': !hasPermission('procure-supervise-home'.toUpperCase()) }">采购监管</span>
          </div>
          <div class="subDes">
            <span :class="{ 'no-permission': !hasPermission('procure-supervise-home'.toUpperCase()) }"
              >汇聚华润集团采购全生命周期数据，应用大数据建模、OCR、NLP及机器学习等能力，实现采购风险自动化智能化校验，提升采购全链路风险管控能力，引领采购业务向智能化迈进。</span
            >
          </div>
        </div>
        <div class="item" :style="{ height: itemHeight, width: itemWidth }" @click="goUrl('employ-tolly-home')">
          <div class="bg4"></div>
          <div class="subTitle">
            <span :class="{ 'no-permission': !hasPermission('employ-tolly-home'.toUpperCase()) }"
              >聘用第三方服务机构</span
            >
          </div>
          <div class="subDes">
            <span :class="{ 'no-permission': !hasPermission('employ-tolly-home'.toUpperCase()) }"
              >基于聘用第三方服务机构的上报数据，分析各业务单元在聘用第三方机构业务的执行合规及风险，包括：
              <ul style="list-style: unset;list-style-position: inside; margin-left: 1.4em; text-indent: -1.4em;">
                <li>
                  报送及时性
                </li>
                <li>
                  每月上报现状及聘用第三方分布
                </li>
                <li>
                  向外提供数据情况
                </li>
                <li>
                  是否存在第三方聘用过于集中（机构集中分析、大陆以外地区集中分析）
                </li>
                <li>
                  各类型第三方服务机构画像
                </li>
                <li>
                  年度汇总及境内外机构聘用趋势
                </li>
              </ul>
            </span>
          </div>
        </div>
        <div
          class="item"
          :class="{ 'no-permission': !hasPermission('procure-expert-score-home') }"
          :style="{ height: itemHeight, width: itemWidth }"
          @click="goUrl('procure-expert-score-home')"
        >
          <div class="bg5"></div>
          <div class="subTitle">
            <span :class="{ 'no-permission': !hasPermission('procure-expert-score-home'.toUpperCase()) }"
              >采购专家评分</span
            >
          </div>
          <div class="subDes">
            <span :class="{ 'no-permission': !hasPermission('procure-expert-score-home'.toUpperCase()) }"
              >通过搭建“专家打分评指标价体系”提供专家对固定供应商是否存在违规违纪等行为线索，帮助企业快速定位纪检线索，辅助企业自审自查。</span
            >
          </div>
        </div>
        <div class="item" :style="{ height: itemHeight, width: itemWidth }" @click="goUrl('san-zhong-yi-da-home')">
          <div class="bg2"></div>
          <div class="subTitle">
            <span :class="{ 'no-permission': !hasPermission('san-zhong-yi-da-home'.toUpperCase()) }">三重一大</span>
          </div>
          <div class="subDes">
            <span :class="{ 'no-permission': !hasPermission('san-zhong-yi-da-home'.toUpperCase()) }"
              >对“三重一大”事项的决策及执行分析月报，涉及事项包括：
              <ul style="list-style: unset;list-style-position: inside;margin-left: 1.4em; text-indent: -1.4em;">
                <li>
                  重大决策事项
                </li>
                <li>
                  重大人事任免
                </li>
                <li>
                  重大项目安排
                </li>
                <li>
                  大额资金运作
                </li>
              </ul>
            </span>
          </div>
        </div>
<!--         <div
          class="item"
          :style="{ height: itemHeight, width: itemWidth }"
          @click="goUrl('supervise-accountability-home')"
        >
          <div class="bg6"></div>
          <div class="subTitle">
            <span :class="{ 'no-permission': !hasPermission('supervise-accountability-home'.toUpperCase()) }"
              >监督追责</span
            >
          </div>
          <div class="subDes">
            <span :class="{ 'no-permission': !hasPermission('supervise-accountability-home'.toUpperCase()) }"></span>
          </div>
        </div> -->

      </div>
      <!-- <div class="box1">
        <Row :gutter="50" align="middle" justify="center">
          <Col span="8">

          </Col>
          <Col span="8">

          </Col>
          <Col span="8">

          </Col>
        </Row>
      </div>
      <div class="box2">
        <Row :gutter="50" align="middle" justify="center">
          <Col span="8">

          </Col>
          <Col span="8">

          </Col>
          <Col span="8">

          </Col>
        </Row>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { CoreModuleName } from '@/const'
import { ResetPassword } from 'ripples'
import permission from '@/mixin/permission'
export default {
  name: 'OverviewIndex',
  components: {},
  props: {},
  mixins: [permission],
  data() {
    return {
      itemHeight: '373px',
      itemWidth: '548px',
      user: {}
    }
  },
  created() {
    const { userInfo } = window.$store.state[CoreModuleName]
    if (userInfo.userName) {
      this.user = userInfo
    } else {
      window.$util.GetLoginData().then(res => {
        if (!res) {
          return
        }
        if (res.userBasicVo) {
          this.setUserInfo(res.userBasicVo)
          this.user = res.userBasicVo
        }
      })
    }
  },
  mounted() {
    // if (document.body.offsetHeight >= 900) {
    //   this.itemHeight = (document.body.offsetHeight - 220) / 2 + 'px'
    // } else {
    //   this.itemHeight = document.body.offsetHeight / 2 + 'px'
    // }
    // if (document.body.offsetWidth >= 1400) {
    //   this.itemWidth = '30%'
    // } else {
    //   this.itemWidth = '48%'
    // }

    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    ...mapMutations(window.$moduleName, ['setUserInfo']),
    handleResize() {
      // if (this.offsetHeight >= 900) {
      //   this.itemHeight = (document.body.offsetHeight - 220) / 2 + 'px'
      // } else {
      //   this.itemHeight = document.body.offsetHeight / 2 + 'px'
      // }
      // if (document.body.offsetWidth >= 1300) {
      //   this.itemWidth = '30%'
      // } else {
      //   this.itemWidth = '48%'
      // }
      // console.log(document.body.offsetHeight, '1')
      // console.log(document.body.offsetWidth, '2')
      // console.log(this.itemHeight, '3')
      // console.log(this.itemWidth, '4')
    },
    handleClickUserDropdown(name) {
      switch (name) {
        case 'loginout':
          window.$util.logout()
          break
        case 'resetPassword':
          this.resetPassword()
          break
      }
    },
    resetPassword() {
      new this.$pageModal(
        ResetPassword,
        {
          props: {}
        },
        // eslint-disable-next-line no-unused-vars
        data => {}
      )
    },
    goUrl(name) {
      if (!this.hasPermission(name.toUpperCase())) {
        this.$message.error('无权限查看')
        return false
      }
      this.$router.push({ name })
    }
  },
  computed: {},
  watch: {},
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="less" scoped>
.header-wrap {
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding-left: 24px;
  background: #ffffff;
  box-shadow: 0px 2px 26px 0px rgba(229, 233, 238, 0.69);
  .logo-img {
    width: 180px;
    display: inline-block;
    height: 30px;
    background: url(../../asset/images/logo_digital_black.png) no-repeat center center;
    background-size: cover;
  }
  .header-r {
    height: 100%;
    display: flex;
    align-items: center;
    .ivu-btn {
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #12151b;
      letter-spacing: 0;
      font-weight: 500;
      &:focus {
        box-shadow: none;
      }
    }

    .login-btn {
      width: 180px;
      height: 100%;
      background: #ff7b0f;
      border-radius: 3px;
      border: none;
      font-family: PingFangSC-Medium;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
  }
}
.container {
  min-height: 100%;
  width: 100%;
  .logo {
    padding-top: 20px;
    padding-left: 20px;
    position: fixed;
    height: auto;
    width: 200px;
  }
  .menhu-content {
    min-height: 100%;
    width: 100%;
    background-image: url('../../asset/images/menhu/bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .title {
      height: 63px;
      font-size: 45px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #1b2a52;
      line-height: 53px;
      letter-spacing: 9px;
      text-align: center;
      padding-top: 15px;
    }
    .box1 {
      padding: 0 85px 0px 85px;
      margin-top: 58px;
    }
    .box2 {
      padding: 0px 85px 63px 85px;
      margin-top: 50px;
    }
    .item {
      border-radius: 10px;
      border: 2px solid #ffffff;
      cursor: pointer;
      padding-top: 40px;
      padding-left: 42px;
      position: relative;
      z-index: 1;
      width: 30%;
      min-height: 312px;
      &:hover {
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
      }
      .subTitle {
        height: 53px;
        font-size: 35px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        color: #1b2a52;
        line-height: 41px;
        margin-bottom: 13px;
        position: relative;
        z-index: 2;
      }
      .no-permission {
        color: gray;
      }
      .subDes {
        width: 280px;
        height: 66px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 300;
        color: #1b2a52;
        line-height: 1.5;
        position: relative;
        z-index: 2;
      }
    }
    .bg1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../../asset/images/menhu/国资监管画像总览.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      opacity: 0.6;
      z-index: 0;
    }
    .bg2 {
      background-image: url('../../asset/images/menhu/三重一大.png');
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      opacity: 0.6;
      z-index: 0;
    }
    .bg3 {
      background-image: url('../../asset/images/menhu/采购监管.png');
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      opacity: 0.6;
      z-index: 0;
    }
    .bg4 {
      background-image: url('../../asset/images/menhu/聘用第三方服务机构.png');
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      opacity: 0.6;
      z-index: 0;
    }
    .bg5 {
      background-image: url('../../asset/images/menhu/采购专家评分.png');
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      opacity: 0.6;
      z-index: 0;
    }
    .bg6 {
      background-image: url('../../asset/images/menhu/监督追责.png');
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      opacity: 0.6;
      z-index: 0;
    }
  }
}
</style>
